import React, { Component } from 'react'
import { Consumer } from '../utils/TodoContext'
import './style.css'

export default class TodoItem extends Component {

  render() {
    const {id, title, completed} = this.props
    return (
      <div className="card">
        <div
          className={`card-content ${completed ? 'completed' : ''}`}
          // className="card-content"
          // style={{
          //   backgroundColor: completed ? '#eaeaea' : '#FFF',
          //   textDecoration: completed ? 'line-through' : 'none',
          // }}
        >
          <div className="content overflow">
            {id} - {title}
            {/* - {completed ? '已完成' : '未完成'} */}
          </div>
        </div>
        <Consumer>
          {
            (value) => {
              // value = {toggle: f, remove: f}
              const {toggle, remove} = value
              return (
                <footer className="card-footer">
                  <a
                    href="/"
                    className="card-footer-item"
                    onClick={event => {
                      event.preventDefault()
                      toggle(id)
                    }}
                  >改为{completed ? '未' : '已'}完成</a>
                  <a
                    href="/"
                    className="card-footer-item"
                    onClick={event => {
                      event.preventDefault()
                      remove(id)
                    }}
                  >删除</a>
                </footer>
              )
            }
          }
        </Consumer>
      </div>
    )
  }
}
